<!--  -->
<template>
  <div class="box">子组件
  
   <div>
     {{ modelValue }}

     <div>
        {{ modelValueId }}
     </div>

     <input v-model="modelValue" type="text">

     <button @click="update">修改</button>
   </div>
  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,defineProps,defineEmits} from 'vue'

const modelValue=defineModel();
const modelValueId=defineModel('id');
// const emit = defineEmits(['update:id'])

//  const props= defineProps(['modelValue'])

 const inputHandle=(e:any)=>{

  
    // emit('update:modelValue',e.target.value);
    
 }

 const update = ()=>{

    // emit('update:modelValue','你好世界');

    modelValue.value='你好世界';

    modelValueId.value=2;
   
 }

</script>
<style scoped>
.box{
    width: 500px;
    height: 100px;
    background: skyblue;
}
</style>